<template>
<div>
<!--条件查询 form表单-->
  <el-form ref="form" :model="sizeForm" :inline="true">

    <el-form-item label="手机号码:">
      <el-input v-model="sizeForm.name" ></el-input>
    </el-form-item>

    <el-form-item label="课程名称:">
      <el-input v-model="sizeForm.name" ></el-input>
    </el-form-item>

    <el-form-item label="">
      <div class="block">
        <span class="demonstration">支付时间:</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </el-form-item>

    <el-form-item label="订单状态:">
      <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
        <el-option label="待支付" value="0"></el-option>
        <el-option label="支付成功" value="1"></el-option>
        <el-option label="支付失败" value="1"></el-option>
        <el-option label="已关闭" value="1"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="订单编号:" >
      <el-input v-model="sizeForm.name" style="width:185px;" ></el-input>
    </el-form-item>

    <el-form-item label="后台备注:" >
      <el-input v-model="sizeForm.name"  style="width:185px;"></el-input>
    </el-form-item>

    <el-form-item label="讲师名称:" >
      <el-input v-model="sizeForm.name"  style="width:185px;"></el-input>
    </el-form-item>

    <el-form-item label="购买渠道:">
      <el-select v-model="sizeForm.region" placeholder="请选择活动区域" style="width:190px;">
        <el-option label="PC端" value="0"></el-option>

      </el-select>
    </el-form-item>

    <el-form-item label="支付方式:">
      <el-select   v-model="sizeForm.region" placeholder="请选择活动区域" style="width:192px;">
        <el-option label="微信支付" value="0"></el-option>
        <el-option label="支付宝支付" value="1"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item >
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>

<!--课程展示-->
  <template>
    <el-table
      :data="tableData"
      border
      style="width: 100%" @cell-click="handle">
      <el-table-column
        fixed
        prop="date"
        label="序号" >
      </el-table-column>
      <el-table-column
        prop="name"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="province"
        label="课程信息">
      </el-table-column>
      <el-table-column
        prop="city"
        label="讲师信息">
      </el-table-column>
      <el-table-column
        prop="address"
        label="用户信息">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="交易类型/渠道">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="支付方式/价格">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="订单状态/时间">
      </el-table-column>
      <el-table-column
        prop=""
        label="客户备注">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="dialogVisible=true">备注</el-button>
<!--备注的对话框-->
          <el-dialog title="订单备注"
                     :visible.sync="dialogVisible"
                     width="30%" :modal="false" >
            <el-form :inline="true" :model="formInline">
              <el-form-item  label="备注"  >
                <el-input type="textarea" placeholder="请输入内容"  ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible=false">确认</el-button>
              <el-button type="danger" @click="dialogVisible=false">取消</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </template>
<!--完整分页功能-->
  <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>
  </div>
</div>
</template>

<script>
export default {
  //这是往前端页面提供的各种方法
  methods: {
    name:"CoursesOrder",
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      console.log('submit!');
    },
    handle(row,column,event,cell){
      if (column.property=="name"){
        alert(JSON.stringify(row));
      }else if (column.property=="province"){
        alert(JSON.stringify(row));
      }else if (column.property=="city"){
        alert(JSON.stringify(row));
      }
    }
  },
  //这是往前端页面提供的各种数据
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
      currentPage: 1,
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: '',
      dialogVisible:false,
      formInline:{
        num:'1'
      }
    }
  }
}

</script>

<style scoped>


</style>
